<template>
	<!-- 视频详情页面 -->
	<view>
		<navBar :title="'视频'"></navBar>
		<!-- 视频 -->
		<view class="u-content">
			<!-- <p v-html="videos.video"></p> -->
			<!-- <u-parse :html="videoChildrenList[current].src" :show-with-animation="true" ></u-parse> -->
			<u-parse :html="videoSrc" :show-with-animation="true"></u-parse>
		</view>

		<view class="videoTitle">
			{{videoData.title}}
		</view>

		<view class="videoText">
			<u-section :title="JJtitle" sub-title="简介内容" @click="modalShow = true"></u-section>
		</view>
		
		<view class="gaoshi">
			(教学视频均出自哔哩哔哩，如有侵权请联系我们进行删除)
		</view>

		<u-modal title="简介" mask-close-able v-model="modalShow" :title-style="{color:'#2979ff'}"
			:content="videoData.intro"></u-modal>

		<!-- 视频的点赞评论数量 -->
		<view class="hot">
			<view class="two">
				<view class="two-left">
					<view class="two-left-foot">
						<image src="../../static/foot2.png" mode=""></image>
					</view>
					<view class="two-left-footnumber">
						{{videoData.browse}}
					</view>
				</view>
				<view class="two-right">
					<view class="two-right-comment">
						<image src="../../static/comment2.png" mode=""></image>
					</view>
					<view class="two-right-commentnumber">
						{{videoData.praiseSum}}
					</view>
				</view>
			</view>
			<view class="one">
				<text>{{videoData.updatedAt}}</text>
			</view>
		</view>

		<!-- 执行点赞评论操作 -->
		<view class="caozuo">
			<view>
				<u-icon label="点赞" label-pos="bottom" label-size="24" margin-top="10"
					:name="remark === 0 ? 'thumb-up' : 'thumb-up-fill'" color="#2979ff" size="50rpx"
					@click="changeVideoZanType">
				</u-icon>
			</view>
			<view>
				<u-icon label-pos="bottom" label-size="24" margin-top="10" label="收藏"
					:name="collect === 0 ? 'star' : 'star-fill'" color="#2979ff" size="50rpx"
					@click="changeVideoCollectType">
				</u-icon>
			</view>
			<view>
				<u-icon @click="no" label-pos="bottom" label-size="24" margin-top="10" label="不喜欢" name="thumb-down"
					color="#2979ff" size="50rpx">
				</u-icon>
			</view>
			<view>
				<u-icon @click="no" label-pos="bottom" label-size="24" margin-top="10" label="转发" name="zhuanfa"
					color="#2979ff" size="50rpx">
				</u-icon>
			</view>
		</view>

		<view style="padding-top: 50rpx;">
			<u-tabs bar-width="80" :list="videoChildrenListName" :current="current" @change="changeCurrent"></u-tabs>
		</view>

		<view class="all">
			<view class="comment">
				<view class="comment-avatar">
					<u-avatar :src="userInfo.user_img"></u-avatar>
				</view>
				<view class="comment-input">
					<u-input type="textarea" maxlength="40" :height="100" v-model="value" :border="true"
						placeholder="请输入评论内容" border-color="#2979ff" />
				</view>
				<view class="comment-icon">
					<text style="color: #2979FF;font-weight: bold;" @click="addComment">发表</text>
				</view>
			</view>
			<view>
			</view>
		</view>

		<!-- 视频评论列表 -->
		<view class="commentList">
			<view class="commentList-title">
				<text>评论列表</text>
			</view>
			<view v-for="(item,index) in twoComment" :key="item.id" class="commentList-item">
				<view class="commentList-item-avatar">
					<u-avatar :src="item.user_img"></u-avatar>
				</view>
				<view class="commentList-item-text">
					<text class="one">
						{{item.user_name}}
					</text>
					<text class="two">
						{{item.comment_text}}
					</text>
					<text class="three">
						{{item.updatedAt}}
					</text>
				</view>
			</view>
			<view class="lookMore">
				<text @click="popupShow = true">查看更多评论</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<!-- 更多评论弹出层 -->
		<view>
			<u-popup v-model="popupShow" mode="bottom" height="1000rpx">
				<view class="commentList">
					<empty :pad="'100rpx'" v-show="comment.length === 0" :text="'此博客暂时还没有评论,快来留下它的第一条评论吧!'"></empty>
					<view v-for="(item2,index) in comment" :key="item2.id" class="commentList-item">
						<view class="commentList-item-avatar">
							<u-avatar :src="item2.user_img"></u-avatar>
						</view>
						<view class="commentList-item-text">
							<text class="one">
								{{item2.user_name}}
							</text>
							<text class="two">
								{{item2.comment_text}}
							</text>
							<text class="three">
								{{item2.updatedAt}}
							</text>
						</view>
					</view>
				</view>

				<!-- 底部触发加载更多 -->
				<view style="padding-bottom: 50rpx;">
					<u-loadmore :load-text="loadText" margin-bottom="30rpx" :status="status" @loadmore="add" />
				</view>
				
			</u-popup>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getVideoDetailData,
		changeVideoZan,
		changeVideoCollect,
		addVideoComment,
		getVideoCommentList,
		getVideoDetailListData
	} from '../../utils/video.js'
	export default {
		data() {
			return {
				//视频数据
				videoData: {},
				//视频点赞状态
				remark: 0,
				//视频的收藏状态
				collect: 0,
				//用户id
				user_id: '',
				//视频id
				video_id: '',
				modalShow: false,
				//简介标题
				JJtitle: '',
				//用户信息
				userInfo: {},
				//用户输入评论的内容
				value: '',
				//查评论用的参数
				pageNum: 1,
				pageSize: 7,

				twoComment: [],
				comment: [],
				height: '',
				//弹出框的显示与隐藏
				popupShow: false,
				//改变加载更多的文字
				loadText: {
					loadmore: '点击加载更多内容',
					loading: '正在加载,请喝杯奶茶',
					nomore: '没有更多了'
				},
				status: 'loadmore',
				videoChildrenList: [],
				videoChildrenListName: [],
				current: 0,

				videoSrc: '',

				isShow: false,
			};
		},
		watch: {

		},
		// computed:{
		// 	videos(){
		// 		return this.videoChildrenList[this.current]
		// 	}
		// },
		methods: {
			//提示此功能暂未开放
			no() {
				this.$refs.uToast.show({
					title: '此功能暂未开放',
					type: 'warning',
					duration: 1000
				})
			},
			//获取视频详情数据
			async getData() {
				let result = await getVideoDetailData(this.video_id, this.user_id)
				if (result.code === 200) {
					console.log(result)
					this.videoData = result.data[0]
					this.JJtitle = this.videoData.intro.slice(0, 20) + '...'
					this.getVideoComment()
					if(result.collect !== null && result.remark !== null){
						this.remark = result.remark
						this.collect = result.collect
					}					
					
				}
			},
			//获取视频详情视频列表
			async getListData() {
				let result = await getVideoDetailListData(this.video_id)
				if (result.code === 200) {
					this.videoChildrenList = result.data
					this.videoSrc = result.data[0].src
					result.data.forEach(item => this.videoChildrenListName.push({
						name: item.video_title
					}))
				}
			},
			//改变视频的点赞状态
			async changeVideoZanType() {
				if(this.isShow === true){
					let type = this.remark === 0 ? 1 : 0
					let data = {
						user_id: this.user_id,
						video_id: this.video_id
					}
					let result = await changeVideoZan(type, data)
					if (result.code === 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
							duration: 1000
						})
						this.remark = this.remark === 0 ? 1 : 0
					}else{
						this.$refs.uToast.show({
							title: '您的账号已被封禁,请联系开发者',
							type: 'error',
							duration: 1000
						})
					}
				}else{
					this.$refs.uToast.show({
						title: '请先登录',
						type: 'warning',
						duration: 1000
					})
				}			
			},
			//改变视频的收藏状态
			async changeVideoCollectType() {
				if(this.isShow === true){
					let type = this.collect === 0 ? 1 : 0
					let data = {
						user_id: this.user_id,
						video_id: this.video_id
					}
					let result = await changeVideoCollect(type, data)
					if (result.code === 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success',
							duration: 1000
						})
						this.collect = this.collect === 0 ? 1 : 0
					}else{
						this.$refs.uToast.show({
							title: '您的账号已被封禁,请联系开发者',
							type: 'error',
							duration: 1000
						})
					}
				}else{
					this.$refs.uToast.show({
						title: '请先登录',
						type: 'warning',
						duration: 1000
					})
				}				
			},
			//获取视频评论列表
			async getVideoComment() {
				let result = await getVideoCommentList(this.videoData.video_id, this.pageNum, this.pageSize)
				if (result.code === 200) {
					this.comment = [...this.comment, ...result.data]
					this.status = 'loadmore'
					this.twoComment = this.comment.map((item, index) => {
						if (index <= 1) {
							return item
						}
					}).filter(item => item !== undefined)
					if (result.data.length === 0) {
						this.status = 'nomore'
					}
				}
			},
			//发表评论
			async addComment() {
				if (this.value === '' || this.value.length < 2) {
					this.$refs.uToast.show({
						title: '内容不能为空或者小于2个字',
						type: 'warning',
						duration: 1500
					})
				} else {
					if (this.isShow === true) {
						let data = {
							user_id: this.user_id,
							video_id: this.video_id,
							comment_text: this.value
						}
						let result = await addVideoComment(data)
						if (result.code === 200) {
							this.$refs.uToast.show({
								title: '评论成功',
								type: 'success',
								duration: 1000
							})
							this.value = ''
							this.pageNum = 1
							this.pageSize = 5
							this.comment = this.twoComment = ''
							this.getVideoComment()
						} else {
							this.$refs.uToast.show({
								title: '您的账号已被封禁,请联系开发者',
								type: 'error',
								duration: 1000
							})
						}
					} else {
						this.$refs.uToast.show({
							title: '登录以后才能发表评论哦',
							type: 'warning',
							duration: 1000
						})

					}
				}
			},
			//加载更多评论
			add() {
				if (this.status === 'nomore') {
					return
				} else {
					this.pageNum++
					this.status = 'loading'
					setTimeout(() => {
						this.getVideoComment()
					}, 1000)
				}
			},
			changeCurrent(index) {
				this.current = index
				this.videoSrc = this.videoChildrenList[index].src
			}
		},
		onLoad(option) {
			let id = uni.getStorageSync('userInfo').user_id
			this.user_id = id === undefined ? 0 : id
			this.isShow = id === undefined ? false : true
			this.video_id = option.id
			this.userInfo = uni.getStorageSync('userInfo')
			this.getListData()
			this.getData()
			this.height = uni.getSystemInfoSync().windowHeight * 1.5 + 'rpx'
		}
	}
</script>

<style lang="scss" scoped>
	.u-content {
		color: $u-content-color;
		font-size: 32rpx;
		width: 100%;
	}

	/deep/iframe {
		width: 100%;
		height: 500rpx;
	}

	.videoTitle {
		width: 95%;
		margin: 0 auto;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.gaoshi{
		color: #909399;
		padding-top: 20rpx;
		width: 95%;
		margin: 0 auto;
	}

	.videoText {
		width: 95%;
		margin: 0 auto;
		font-size: 28rpx;
		color: #606266;
	}

	.hot {
		width: 95%;
		margin: 0 auto;
		display: flex;
		padding-top: 20rpx;

		.two {

			width: 60%;
			display: flex;
			color: #82848a;

			.two-left {
				width: 50%;
				display: flex;


				.two-left-foot {
					width: 21%;

					image {
						width: 100%;
						height: 40rpx;
						color: #c8c9cc;
					}
				}

				.two-left-footnumber {
					padding-left: 10rpx;
				}
			}

			.two-right {
				width: 50%;
				display: flex;


				.two-right-comment {
					width: 21%;
					display: flex;

					image {
						width: 100%;
						height: 45rpx;
					}
				}

				.two-right-commentnumber {
					padding-left: 10rpx;
				}
			}
		}

		.one {
			width: 40%;
			color: #c8c9cc;
			display: flex;
			align-items: center;
		}
	}

	.caozuo {
		padding-top: 30rpx;
		width: 85%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.inputs {
		position: sticky;
		bottom: 0;
	}

	.all {
		width: 95%;
		margin: 0 auto;
		padding-top: 60rpx;

		.comment {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.comment-avatar {
				width: 15%;
			}

			.comment-input {
				width: 70%;
			}

			.comment-icon {
				width: 10%;

				image {
					width: 100%;
					height: 65rpx;
				}
			}
		}
	}

	.commentList {
		padding-top: 60rpx;
		width: 90%;
		margin: 0 auto;

		.commentList-title {
			font-size: 32rpx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}

		.commentList-item {
			display: flex;
			padding-bottom: 60rpx;

			.commentList-item-avatar {
				width: 20%;
			}

			.commentList-item-text {
				width: 80%;
				display: flex;
				flex-direction: column;

				.one {
					font-size: 35rpx;
					font-weight: bold;
					padding-bottom: 10rpx;
				}

				.two {
					font-size: 29rpx;
					color: #606266;
					padding-bottom: 15rpx;
				}

				.three {
					font-size: 25rpx;
					color: #909399;
				}
			}
		}

		.lookMore {
			display: flex;
			justify-content: center;
			color: #909399;
			padding-bottom: 50rpx;
		}
	}
</style>
